<template>
  <div id="tmpl">
    <ul class="mui-table-view">
        <li v-for="item in list" class="mui-table-view-cell mui-media">
          <a href="javascript:;" class="">
            <img class="mui-media-object mui-pull-left" :src="item.img_url">
            <div class="mui-media-body">
              {{item.title}}
              <p class="mui-ellipsis" v-text="item.zhaiyao"></p>
              <p class="lastrTime"><span>{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}}</span><span class="click">{{item.click}}次浏览</span></p>
            </div>
          </a>
        </li>
      </ul>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default{
  data(){
      return{
        list:[]
      }
    }
    ,
    created(){

      this.getNewslist()

    },
    methods:{
      getNewslist(){
         var url = "http://182.254.146.100:8899/api/getnewslist";
        this.$http.get(url).then(function(res){

          var body = res.body;
          console.log(body.message)
            if(body.status!=0){
                Toast(body.message);
                return
            }

           this.list = body.message;

        })
      }
    }
  }
</script>

<style scoped>
  .mui-table-view .mui-media-object.mui-pull-left{
    width: 80px;
    height: 80px;
    max-width:80px;
  }
  .lastrTime{
    margin-top: 1.5em;
    font-size: 12px;
    color: blue;
  }
  .click{
    margin-left: 10px;
  }
</style>